<script setup lang="ts">
import SidebarItem from './sub.vue'
import type { Menu } from '#/global'
import { InjectionI18nTitle } from '@/utils/injectionKeys'

defineOptions({
  name: 'SidebarItem',
})

defineProps<{
  item: Menu.recordMainRaw
}>()

const generateI18nTitle = inject(InjectionI18nTitle, Function, true)
</script>

<template>
  <div class="sidebar-item">
    <el-sub-menu :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)" :index="JSON.stringify(item)" popper-class="fa-popup-menu">
      <template #title>
        <div class="item">
          <svg-icon v-if="item.meta?.icon" :name="item.meta.icon" class="title-icon unactive" async />
          <svg-icon v-if="item.meta?.activeIcon || item.meta?.icon" :name="(item.meta.activeIcon || item.meta.icon)!" class="title-icon active" async />
          <span class="title">{{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}</span>
        </div>
      </template>
      <template v-for="route in item.children">
        <SidebarItem v-if="route.meta?.sidebar !== false" :key="route.path" :item="route" />
      </template>
    </el-sub-menu>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-sub-menu) {
  > .el-sub-menu__title .title-icon.active {
    display: none;
  }

  &.is-active {
    > .el-sub-menu__title .title-icon.unactive {
      display: none;
    }

    > .el-sub-menu__title .title-icon.active {
      display: block;
    }
  }
}
</style>
